<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Cabinet Admin</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
  <meta name="format-detection" content="telephone=no">
  <!--<script type="text/javascript" src="js/adaptive.js"></script>-->
  <META HTTP-EQUIV="pragma" CONTENT="no-cache">
  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
  <META HTTP-EQUIV="expires" CONTENT="0">
  <link rel="stylesheet" href="../element-ui/index.ml.css">
  <script type="text/javascript" src="../js_code/jquery-3.6.1.min.js?v=2"></script>
  <script type="text/javascript" src="../element-ui/vue.js"></script>
  <!-- import JavaScript -->
  <script type="text/javascript" src="../element-ui/index.en.js"></script>

  <script src="../js_code/underscore-min.js"></script>
  <script src="../js_code/jquery-3.6.1.min.js"></script>
  <script src="../js_code/iotauth.js"></script>
  <script src="../js_code/kddemo.js"></script>
  <script>
    function refresh2() {
      window.location.reload();
    }
  </script>
  <style>
    .box-card {

      display: inline-block;
    }
  </style>
</head>
<body class="big_show">

<div>
  <input id="base_url" value="https://api.bestwond.com" style="width: 200px;border-radius: 5px;">
  App Id<input id="app_id" value="" style="width: 200px;border-radius: 5px;">
  App Secret<input id="app_secret" value="" style="width: 200px;border-radius: 5px;">

<!--  <button onclick="kd.get_device_list()">Get Device List</button>-->
</div>
<div id="app"
     class="screen_app">
  <el-row>

    <el-card class="box-card" style="width: 700px;height: 460px;">
      <div slot="header" class="clearfix">
        <h2> sync order</h2>
      </div>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="Device Id:">
          <el-input v-model="device_number"  style="width:320px;">
          </el-input>
        </el-form-item>
        <el-form-item label="Parcel order no:">
          <el-input v-model="order_no"  class="input-with-select"  style="width:320px;">

          </el-input>
        </el-form-item>

        <el-form-item label="Box Size:">
          <el-select v-model="box_size" placeholder="Select" style="width:120px;">
            <el-option label="Small" value="S"></el-option>
            <el-option label="Middle" value="M"></el-option>
            <el-option label="Larger" value="L"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="set_device_order()" type="success"
                     style="margin-top: 5px;height:60px;width: 160px;font-weight: bolder;font-size: 25px;">
            Confirm
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 600px;height: 460px;background-color: black;color:white;">
      <div slot="header" class="clearfix">
        <span>{{device_number}} API Result</span>
      </div>

      <div v-if="api_data">
        Msg: {{api_data.msg}}
        <div v-if="api_data.data">
          <div>Device number: {{api_data.data.device_number}}</div>
          <div>Drop-off Code: {{api_data.data.save_code}}</div>
          <div>Collect Code: {{api_data.data.pick_code}}</div>
          <div>Parcel Order no: {{api_data.data.order_no}}</div>
        </div>
      </div>

      {{api_data}}
    </el-card>
  </el-row>

  <el-row>

    <el-card class="box-card" style="width: 700px;height: 400px;">
      <div slot="header" class="clearfix">
        <h2> remove order</h2>
      </div>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="Device Id from:">
          <el-input v-model="device_number_from"   style="width:320px;">
          </el-input>
        </el-form-item>
        <el-form-item label="order_no:">
          <el-input v-model="order_no2"  class="input-with-select"   style="width:320px;">

          </el-input>
        </el-form-item>
        <el-form-item label="Device Id to:">
          <el-input v-model="device_number_to"   style="width:320px;">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="save_in_by_input()" type="success"
                     style="margin-top: 20px;height:60px;width: 160px;font-weight: bolder;font-size: 25px;">
            Confirm
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <el-card class="box-card" style="width: 700px;height: 400px;">
      <div slot="header" class="clearfix">
        <h2> Set Express storage and retrieval Webhook</h2>
      </div>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="Save Notify Url:">
          <el-input v-model="save_notify_url"   style="width:320px;">
          </el-input>
        </el-form-item>
        <el-form-item label="Take Notify Url:">
          <el-input v-model="take_notify_url"   style="width:320px;">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="take_out_by_input()" type="success"
                     style="margin-top: 20px;height:60px;width: 160px;font-weight: bolder;font-size: 25px;">
            Confirm
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>




  </el-row>
</div>
</body>

<script>

  bw = new Vue({
    el: '#app',
    data: {
      form: {},
      device_number: "2100012593",
      notice_email: "",
      loading: false,
      order_no: "",
      save_code: "",
      take_code: "",
      select_num: "number",
      api_data: "",
      box_size: "S",
      device_number_from:"",
      device_number_to:"",
      order_no2: "",
      save_notify_url: "",
      take_notify_url: ""
    },
    created: function () {

    },
    methods: {
      set_device_order: function () {
        this.api_data = kd.send_device_orders(this.device_number, this.order_no, this.box_size);
      },

      save_in_by_input: function () {
        this.api_data = kd.remove_device_orders(this.device_number_from, this.device_number_to, this.order_no2);
      },
      take_out_by_input: function () {
        this.api_data = kd.set_webhook(this.save_notify_url, this.take_notify_url);
      }
      // set_device_orders_email: function () {
      //   this.api_data = kd.set_device_orders_email_notice(this.device_number, this.order_no, this.box_size, this.notice_email);
      // },

    }
  });
</script>
</html>
